<extend name="Base/common" />

<block name="body">

	<form action="{:U('Auth/add')}" id="mac" class="form-horizontal" method="post" enctype="multipart/form-data">

		<div id="photos">

			<header>

				<a href="{:U('index/index')}" class="back"><img src="__IMG__/images/back_03.png" /></a>身份验证</header>

			<div class="personList">

				<ul>

					<li>

						<span class="f-fl">真实姓名</span>

						<input type="text" id="text" name="truename" placeholder="请填写真实姓名" class="f-fr" value="{$data.truename}" />

						<div class="clear"></div>

					</li>

					<li>

						<span class="f-fl">身份证号</span>

						<input type="text" id="text" name="authid" placeholder="请填写身份证号" class="f-fr" value="{$data.authid}" maxlength="18" />

						<div class="clear"></div>

					</li>

					<li>

						<span class="f-fl">上传身份证正反面</span>

						<p>

							<!-- 123 -->

							<script type="text/javascript">

								$(function() {

									$("#pic").click(function() {

										$("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传

										$("#upload").on("change", function() {

											var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径

											if(objUrl) {

												$("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片

											}

										});

									});

								});

								//建立一個可存取到該file的url

								function getObjectURL(file) {

									var url = null;

									if(window.createObjectURL != undefined) { // basic

										url = window.createObjectURL(file);

									} else if(window.URL != undefined) { // mozilla(firefox)

										url = window.URL.createObjectURL(file);

									} else if(window.webkitURL != undefined) { // webkit or chrome

										url = window.webkitURL.createObjectURL(file);

									}

									

									return url;

								}

							</script>

							<span>身份证正面</span>

							<img id="pic" src="<if condition="$data['imgfront'] neq ''">.{$data.imgfront|getimg=###}<else/>__IMG__/images/scewm_03.jpg</if>"  width="160" height="160">
							<input id="upload" name="imgfront" accept="image/*" type="file" style="display: none" value="{$data.imgfront}"/>
							<input type="hidden" name="imgfronts" value="{$data.imgfront}">
							<style>

								#pic {

									width: 160px;

									/*border-radius: 50%;*/

									margin: 20px auto;

									cursor: pointer;

									height: 160px;

									border: 1px solid;

								}



								#upload {

									border: none;

								}

							</style>

							<!-- 123 -->

							<!-- 123 -->

							<script type="text/javascript">

								$(function() {

									$("#pic1").click(function() {

										$("#upload1").click(); //隐藏了input:file样式后，点击头像就可以本地上传

										$("#upload1").on("change", function() {

											var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径

											if(objUrl) {

												$("#pic1").attr("src", objUrl); //将图片路径存入src中，显示出图片

											}

										});

									});

								});

								//建立一個可存取到該file的url

								function getObjectURL(file) {

									var url = null;

									if(window.createObjectURL != undefined) { // basic

										url = window.createObjectURL(file);

									} else if(window.URL != undefined) { // mozilla(firefox)

										url = window.URL.createObjectURL(file);

									} else if(window.webkitURL != undefined) { // webkit or chrome

										url = window.webkitURL.createObjectURL(file);

									}

									return url;

								}

							</script>

							<span>身份证反面</span>

							<img id="pic1" src="<if condition="$data['imgback'] neq ''">.{$data.imgback|getimg=###}<else/>__IMG__/images/scewm_03.jpg</if>"  width="160" height="160">

							<input id="upload1" name="imgback" accept="image/*" type="file" style="display: none" />
<input type="hidden" name="imgbacks" value="{$data.imgback}">


							<style>

								#pic1 {

									width: 160px;

									/*border-radius: 50%;*/

									margin: 20px auto;

									cursor: pointer;

									height: 160px;

									border: 1px solid;

								}

								#upload {

									border: none;

								}

							</style>

							<!-- 123 -->

							<span></span>

						</p>

						<div class="clear"></div>

					</li>

				</ul>

				<style type="text/css">

					.su {

						width: 94%;

						height: 70px;

						border: 0;

						background: #4ea3fd;

						font-size: 30px;

						color: #fff;

						margin: 30px 0px 0px 20px;

					}
					.progress { position:relative;border: 1px solid #ddd; border-radius: 3px;  margin: 30px 0px 0px 20px;width: 94%;height:50px;display:none;}
					.bar { background-color: #B4F5B4; width:0%; height:50px; border-radius: 3px; }
					.percent { position:absolute; display:inline-block; top:3px; left:48%; }
					#status{display:none;margin: 0px 0px 0px 20px;width: 94%;text-align:center;}
				</style>
				<div class="progress">
					<div class="bar"></div >
					<div class="percent">0%</div >
				</div>
				
				<div id="status">上传成功</div>
				
				<input type="submit" class="su ajax-file" target-form="form-horizontal" name="buto" id="buto" value="提交" />
				</div>
				
				
				<p style="font-size: 25px;color: #333;padding:0 20px;margin-top:20px;">认证之后显示认证标志，提高可信度。
                             <br/> 认证将在1个工作日内完成。
                </p>
			</div>

		</div>

	</form>
<script src="__JS__/js/jquery.form.js" type="text/javascript"></script>
	<script type="text/javascript">

		//lkl  重写表单提交S

	var bar = $('.bar');
	var percent = $('.percent');
	
	$('form').ajaxForm({
			beforeSend: function() {
			$('.progress').show();
			var percentVal = '0%';
			bar.width(percentVal)
			percent.html(percentVal);
		},
		uploadProgress: function(event, position, total,percentComplete){
			var percentVal = percentComplete + '%';
			bar.width(percentVal)
			percent.html(percentVal);
		},
		success: function(data) {
			var percentVal = '100%';
			bar.width(percentVal)
			percent.html(percentVal);
			layer.alert(data.info,function(){

							location.reload()

						})
		},
		error:function(err){
			alert("表单提交异常！"+err.msg);
		},
	});
	

	</script>

</block>